<template>
  <div class="sample-wrap">
    <div style="width: 80px">
      <common-marquee-text content="一二三四五六七八九十" />
    </div>

    <img src="../../assets/images/aqcl.png" />

    <common-select
      :initData="initData"
      v-model="value"
      @loadMore="loadMore"
      @remoteSearch="remoteSearch"
      @blurClear="blurClear"
    ></common-select>

    <!--    <chooseDialog></chooseDialog>-->

    <!--    <el-form label-width="100px" :model="form" :rules="rules">
          <div>
            <el-form-item label="确认密码" prop="number">
              <el-input type="number" v-model.number="form.number" style="width: 100%"></el-input>
            </el-form-item>
          </div>

        </el-form>

        <div>
          <common-group-title title="JSON预览组件"></common-group-title>
          <div style="width: 400px;height: 300px">
            <common-json-view :json="json"></common-json-view>
          </div>
        </div>

        <div>
          <common-group-title title="树形图"></common-group-title>
          <div style="width: 400px;height: 300px">
            <title-chart title="树形图" type="chart-tree" :dataset="dataset"></title-chart>
          </div>
        </div>

        <div>
          <common-group-title title="编辑器"></common-group-title>
          <div style="width: 400px;height: 300px">
            {{ codeEditData }}
            <CodeEditor :variable="variable" v-model="codeEditData" placeholder="输入#可以查看变量提示"></CodeEditor>
          </div>
        </div>-->

    <div class="common-magnifier-view-container">
      <!-- <CommonMagnifierView> -->
      <Topology></Topology>
      <!-- </CommonMagnifierView> -->
    </div>
  </div>
</template>

<script>
import TitleChart from "@/components/EChart/TitleChart";
import CodeEditor from "@/components/CodeEditor";
import chooseDialog from "@/views/screenConfig/dataSet/components/chooseDialog";
import RelationCanvas from "@/components/EChart/canvas/relation";
import { initPagination } from "@/utils/util";

import Topology from "@/components/EChart/canvas/topology";

export default {
  name: "index",
  data() {
    return {
      json: {
        name: "common-json-view",
        children: [
          {
            name: "测试1"
          },
          {
            name: "测试2"
          }
        ]
      },
      form: {
        number: 1
      },
      rules: {
        number: [
          {
            required: true,
            type: "number",
            min: 1,
            max: 4,
            message: "请选择处理流程",
            trigger: "blur"
          }
        ]
      },
      dataset: {
        dimensions: ["name", "value"],
        source: [
          {
            name: "1",
            value: 1,
            children: [
              {
                name: "2",
                value: 2
              },
              {
                name: "3",
                value: 3
              }
            ]
          }
        ]
      },
      codeEditData: "",
      variable: [
        {
          label: "用户名",
          value: "userName"
        }
      ],
      option: [],
      value: null,
      initData: [],
      queryForm: {
        pageSize: 10,
        pageNum: 1,
        label: ""
      }
    };
  },
  components: {
    TitleChart,
    CodeEditor,
    RelationCanvas,
    chooseDialog,
    Topology
  },
  methods: {
    init() {
      let initData = [
        { id: 1, label: "1", value: 1 },
        { id: 2, label: "2", value: 2 },
        { id: 3, label: "3", value: 3 },
        { id: 4, label: "4", value: 4 },
        { id: 5, label: "5", value: 5 },
        { id: 6, label: "6", value: 6 },
        { id: 7, label: "7", value: 7 },
        { id: 8, label: "8", value: 8 },
        { id: 9, label: "9", value: 9 },
        { id: 10, label: "10", value: 10 },
        { id: 11, label: "11", value: 11 },
        { id: 12, label: "12", value: 12 },
        { id: 13, label: "13", value: 13 },
        { id: 14, label: "14", value: 14 },
        { id: 15, label: "15", value: 15 },
        { id: 16, label: "16", value: 16 },
        { id: 17, label: "17", value: 17 },
        { id: 18, label: "18", value: 18 },
        { id: 19, label: "19", value: 19 },
        { id: 20, label: "20", value: 20 },
        { id: 21, label: "21", value: 21 },
        { id: 22, label: "22", value: 22 },
        { id: 23, label: "23", value: 23 },
        { id: 24, label: "12319", value: 24 }
      ];
      let filterForm = {
        key: "label",
        value: this.queryForm.label
      };
      this.initData = initPagination(
        initData,
        this.queryForm.pageNum,
        this.queryForm.pageSize,
        filterForm
      );
    },
    loadMore() {
      this.queryForm.pageNum++;
      this.init();
    },
    remoteSearch(query) {
      this.queryForm.label = query;
      this.queryForm.pageNum = 1;
      this.init();
    },
    blurClear() {
      this.queryForm.label = null;
      this.init();
    }
  },
  mounted() {
    this.init();
    // this.option = [
    //   {name: '应用系统2 （表数量：10）'},
    //   {name: '应用系统3 （表数量：11）'},
    //   {name: '应用系统4 （表数量：08）'},
    //   {name: '应用系统5 （表数量：23）'},
    //   {name: '应用系统6 （表数量：30）'},
    //   {name: '应用系统7 （表数量：12）'},
    //   {name: '应用系统8 （表数量：19）'},
    //   {name: '应用系统9 （表数量：20）'},
    //   {name: '应用系统10 （表数量：3）'},
    //   {name: '应用系统11 （表数量：21）'},
    //   {name: '应用系统12 （表数量：29）'},
    //   {name: '应用系统13 （表数量：25）'},
    //   {name: '应用系统14 （表数量：33）'},
    // ]
  }
};
</script>

<style scoped lang="scss">
.sample-wrap {
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  overflow-y: scroll;

  /*display: flex;
  flex-direction: column;*/

  // .common-magnifier-view-container {
  //   width: 800px;
  //   height: 600px;
  // }
}
</style>
